<template>
  <div class="approve">
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body :before-close="closeDelDialog">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="审批事项" name="0" style="height: 600px;">
          <div style="height: 600px; overflow-y: auto; width:100%; margin: auto;">
            <approvalForm :istype=istype isShow="true" :roleUserList = 'roleUserList' ref="approvalFormRef" @close="closeDialog"></approvalForm>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批过程" name="1">
          <el-table :data="tableDataList" border align="center" header-align="center" :height="tableHeight" :loading="loading">
            <el-table-column label="步骤" type="index" :index="table_index" width="55" align="center" />
            <el-table-column label="任务节点" prop="activityName" align="center"></el-table-column>
            <el-table-column label="办理人" prop="assignee" align="center"></el-table-column>
            <el-table-column label="办理人用户名" prop="userName" align="center"></el-table-column>
            <el-table-column label="审批开始时间" prop="startTime" align="center"></el-table-column>
            <el-table-column label="审批结束时间" prop="endTime" align="center"></el-table-column>
            <el-table-column label="用时" prop="time" align="center"></el-table-column>
            <el-table-column label="审批意见" prop="isAgree" align="center"></el-table-column>
            <el-table-column label="批注" prop="comment" align="center"></el-table-column>
          </el-table>
<!--          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />-->
        </el-tab-pane>
        <el-tab-pane label="流程图" name="2">
<!--          <button @click="openImageInNewTab">放大</button>
          <img :src="imageUrl" :style="{ width: zoomedIn ? '200%' : '80%' }" />-->
          <el-image
            :style="{ width: zoomedIn ? '200%' : '80%' }"
            :src="imageUrl"
            :preview-src-list="imageUrlList">
          </el-image>
        </el-tab-pane>

      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import estimateTableHeight from '@/mixins/estimateTableHeight'
import approvalForm from "@/views/archive/archiveBorrow/archiveBorrowReceipt/borrowReceipt.vue"
import {getProcessDate} from "@/api/archive/archiveBorrow/borrowReceipt";
import {searchApprovalBpmnBase64} from "@/api/archive/archivalAppraisal/classification/examineApprove"
export default {
  name: "approve",
  props: ["title","open", "istype"],
  components:{ approvalForm },
  mixins: [estimateTableHeight], // 混入方法
  data() {
    return {
      activeName: '0',
      // 审批过程表数据
      tableDataList: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum:1,
        pageSize:10,
      },
      zoomedIn: false, // 用于控制图片是否放大
      // 流程图地址
      flowchartUrl: '',
      imageUrl: '',
      imageUrlList: [],
      // 外层数据表id
      taskId: '',
      roleUserList: {
        agreeUserList:[],
        notAgreeUserList:[],
        otherUserList:[],
      }
    }
  },
  created() {
    this.activeName = '0'
    this.getConfigKey("FLOWCHART_URL").then(response => {
      this.flowchartUrl = response.msg
    });
  },
  methods: {
    init(val) {
      console.log(val)
      searchApprovalBpmnBase64(val.instanceId).then(resp=>{
        this.imageUrl = "data:image/png;base64,"+resp.data;
        this.imageUrlList = ["data:image/png;base64,"+resp.data];
      })
      //this.imageUrl = this.flowchartUrl + '?instanceId=' + val.instanceId
      this.taskId = val.id
      this.$nextTick(() => {
        this.$refs.approvalFormRef.init(val);
      })
      this.getList()
    },
    zoomInImage() {
      this.zoomedIn = !this.zoomedIn; // 切换放大状态
    },
    openImageInNewTab() {
      // 图片的 URL
      const imageUrl = '图片的URL';
      // 在新标签中打开图片
      const img = new window.Image();
      img.src = 'base64...';

      const newWin = window.open(this.imageUrl);
      newWin.document.body.style.background = '#000';
      newWin.document.body.style.textAlign = 'center';
      newWin.document.body.appendChild(img);
      newWin.document.title = '图片预览';
      newWin.document.close();
    },
    //动态设置table的高度
    tableHeightData() {
      this.$nextTick(
        () => {
          let h = 650;
          //  h = h + 100
          if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.queryForm.$el.offsetHeight
          }
          if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.refbut.$el.offsetHeight
          }
          this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
          return h
        }
      )
    },
    //关闭
    closeDelDialog() {
      this.$emit("closeDelDialog")
      this.activeName = '0'
      this.tableDataList = []
    },
    closeDialog() {
      this.$emit("closeDelDialog")
    },
    //切换
    handleClick() {
      this.tableHeightData();
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    // 获取审批过程表数据
    getList() {
      this.loading = true
      this.tableDataList = [];
      getProcessDate(this.taskId).then(response =>{
        this.loading = false
        for (let i = 0; i < response.data.length; i++) {
          for (let j = 0; j < response.data[i].activityList.length; j++) {
            this.roleUserList.agreeUserList = response.data[i].agreeUserList;
            this.roleUserList.notAgreeUserList = response.data[i].notAgreeUserList;
            this.roleUserList.otherUserList = response.data[i].otherUserList;
            console.log(response.data[i].activityList)
            var startTime = this.processingTime(response.data[i].activityList[j].startTime)
            var endTime = null
            var time = null
            if(response.data[i].activityList[j].endTime != null) {
              endTime = this.processingTime(response.data[i].activityList[j].endTime)
              time = this.calculateElapsedTime(startTime, endTime)
            }
            var isAgree = null
            if(response.data[i].activityList[j].isAgree != null) {
              isAgree = response.data[i].activityList[j].isAgree.controlValue
            }
            var comment = null
            if(response.data[i].activityList[j].comment != null) {
              comment = response.data[i].activityList[j].comment.controlValue
            }
            var userName = null
            if(response.data[i].activityList[j].userName != null) {
              userName = response.data[i].activityList[j].userName
            }
            this.tableDataList.push({
              startTime: startTime,
              endTime: endTime,
              time: time,
              activityName: response.data[i].activityList[j].activityName,
              assignee: response.data[i].activityList[j].assignee,
              isAgree: isAgree,
              comment: comment,
              userName: userName
            })
          }
        }
      })
    },
    processingTime(time) {
      const date = new Date(time);
      // 获取日期的年、月、日
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, '0');
      // 获取时间的小时、分钟、秒
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      // 构建日期时间字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 计算用时
    calculateElapsedTime(startTime, endTime) {
      const start = new Date(startTime);
      const end = new Date(endTime);
      const diff = end - start; // 计算时间差，单位为毫秒

      const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 天
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 小时
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
      const seconds = Math.floor((diff % (1000 * 60)) / 1000); // 秒

      return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
    }
  }
}
</script>

<style scoped>

</style>
